<!-- 饼图 -->
<template>
  <div>
    <!-- <div class="title">
      <p>{{ title }}</p>
    </div> -->
    <div ref="piechart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "综合统计数据分析"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Array,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		this.$nextTick(()=>{
			this.setOptions(this.chartData)
		})
    
  },
  methods: {
    setOptions(chartData) {
      var showData =[]
      var sum = 0, max = 0;
      chartData.forEach(item => {
          sum += item.value
          if(item.value >= max) max = item.value
      })
      // 放大规则
      var number = Math.round(max * 0.1)
      showData = chartData.map(item => {
          return {
            value: number + item.value,
            name: item.name,
            id: item.id
          }
      })
			this.myChart = this.$echarts.init(this.$refs.piechart);
      this.myChart.setOption({
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
          formatter: function (param){
            return param.name +'<br/>'+ '数量 : ' + (param.value - number)
          }
        },
        legend: {
          show:false,
          top: "bottom",
          type: 'scroll'
        },
        series: [
          {
            type: "pie",
            roseType: 'area',
            radius: [20, 100],
            data: showData,
						label:{
							normal:{
								show: true,
								formatter: function (param){
                  return param.name + ' (' + (param.value - number) + ')'
                }
							}
						},
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0
              }
            },
          }
        ]
      });
      this.myChart.off('click');
      this.myChart.on('click',  (params) => {
				this.$emit('pieclick', params.name, this.title, params.data.id)
			});
    }
  }
};
</script>
<style scoped>
</style>